<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Home</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection"/>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet"/>
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet"/>
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet"/>
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet"/>
    <!--&lt;!&ndash; Google Fonts&ndash;&gt;-->
    <!--<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>-->
    <!--<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">-->
</head>

<body>

<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle waves-effect waves-dark" data-toggle="collapse"
                    data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand waves-effect waves-dark" th:href="@{/}"><i
                    class="large material-icons">insert_chart</i>
                <strong>Lger 会员系统</strong></a>

            <div id="sideNav" href=""><i class="material-icons dp48">toc</i></div>
        </div>
        <!--用户登录信息-->
        <ul class="nav navbar-top-links navbar-right">
            <li><a class="dropdown-button waves-effect waves-dark" href="#" data-activates="dropdown1"><i
                    class="fa fa-user fa-fw"></i> <b th:unless="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username == null}" th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></b> <i
                    class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
    </nav>
    <!--用户登录栏的具体信息-->
    <ul id="dropdown1" class="dropdown-content">
        <li><a th:href="@{/myAccount}"><i class="fa fa-user fa-fw"></i>我的账户</a>
        </li>
        <li><a th:href="@{/logout}"><i class="fa fa-sign-out fa-fw"></i>退出登录</a>
        </li>
    </ul>
    <!--侧边栏-->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="waves-effect waves-dark" th:href="@{/}"><i class="fa fa-dashboard"></i>
                        首页</a>
                </li>
                <!--会员管理栏-->
                <li class="active">
                    <a href="javascript:void(0)" class="active-menu waves-effect waves-dark"><i class="fa fa-user"></i>会员管理<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse in" aria-expanded="true">
                        <li>
                            <a class="active-menu" th:href="@{/addMember}">添加会员</a>
                        </li>
                        <li>
                            <a th:href="@{/queryMember}">查询会员</a>
                        </li>
                        <li>
                            <a th:href="@{/memberGrade}">会员类别</a>
                        </li>
                        <li>
                            <a th:href="@{/modifyMemberState}">会员状态修改</a>
                        </li>

                        <li>
                            <a href="#">会员消费<span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a th:href="@{/integralExchange}">积分兑换</a>
                                </li>
                                <li>
                                    <a th:href="@{/balanceRecharge}">余额充值</a>
                                </li>
                            </ul>

                        </li>

                        <li>
                            <a th:href="@{/deleteMember}">会员注销</a>
                        </li>
                    </ul>
                </li>
                <!--礼品栏-->
                <li>
                    <a href="javascript:void(0)" class="waves-effect waves-dark"><i class="fa fa-gift"></i>礼品消费<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a th:href="@{/setGift}">礼品设置</a>
                        </li>

                        <li>
                            <a th:href="@{/modifyGiftNumber}">数量修改</a>
                        </li>

                        <li>
                            <a th:href="@{/exchangeRecord}">兑换记录</a>
                        </li>
                    </ul>
                </li>
                <!--商品消费-->
                <li>
                    <a href="javascript:void(0)" class="waves-effect waves-dark"><i class="fa fa-yen"></i>商品消费<span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a th:href="@{/addCommodity}">添加商品</a>
                        </li>

                        <li>
                            <a th:href="@{/modifyCommodity}">商品修改</a>
                        </li>

                        <li>
                            <a th:href="@{/purchaseCommodity}">商品购买</a>
                        </li>

                        <li>
                            <a th:href="@{/transactionRecord}">积分记录</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a class="waves-effect waves-dark" th:href="@{/birthdayWarning}"><i class="fa fa-birthday-cake"></i>
                        生日提醒</a>
                </li>

                <li>
                    <a class="waves-effect waves-dark" th:href="@{/integralLottery}"><i class="fa fa-star"></i>
                        积分抽奖</a>
                </li>
            </ul>

        </div>

    </nav>
    <!--内容主体-->
    <div id="page-wrapper">
        <!--内容主题-->
        <div class="header">
            <h1 class="page-header">
                添加会员
            </h1>
        </div>
        <div id="page-inner">
            <!--自定义内容-->
            <!--<div class="container">-->
                <div class="card">
                    <div class="card-content">

                        <form th:action="@{/addMember}" method="post" enctype="multipart/form-data" id="addMember">
                            <div class="file-field input-field">
                                <div class="btn">
                                    <span>选择头像文件</span>
                                    <input id="file" type="file" name="icon" multiple="" placeholder="选择文件" accept="image/*" onchange="changeToop()">
                                </div>
                                <div class="file-path-wrapper">
                                    <!--<input class="file-path validate" type="text" placeholder="Upload one or more files">-->
                                    <img id="myimg" src="assets/icon/common.jpg" class="img-responsive img-thumbnail" style="width: 20%;height: 20%" />
                                </div>
                                <!--头像文件上传预览-->
                                <script>
                                    function Id(id){
                                        return document.getElementById(id);
                                    }
                                    function changeToop(){
                                        var file = Id("file");
                                        if(file.value===''){
                                            //设置默认图片
                                            Id("myimg").src='assets/icon/common.jpg';
                                        }else{
                                            preImg("file","myimg");
                                        }
                                    }
                                    //获取input[file]图片的url Important
                                    function getFileUrl(fileId) {
                                        var url;
                                        var file = Id(fileId);
                                        var agent = navigator.userAgent;
                                        if (agent.indexOf("MSIE")>=1) {
                                            url = file.value;
                                        } else if(agent.indexOf("Firefox")>0) {
                                            url = window.URL.createObjectURL(file.files.item(0));
                                        } else if(agent.indexOf("Chrome")>0) {
                                            url = window.URL.createObjectURL(file.files.item(0));
                                        }
                                        return url;
                                    }
                                    //读取图片后预览
                                    function preImg(fileId,imgId) {
                                        var imgPre =Id(imgId);
                                        imgPre.src = getFileUrl(fileId);
                                    }
                                </script>
                            </div>
                            <div class="row">
                                <div class="input-field col s6">
                                    <input placeholder="会员名" id="memberName" type="text" class="validate" name="memberName" required/>
                                    <label for="memberName">会员名</label>
                                </div>
                                <div class="input-field col s6">
                                    <input id="phone" name="phone" type="tel" class="validate" placeholder="联系电话" required/>
                                    <label for="phone">联系电话</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s6">
                                    <input placeholder="会员密码" id="password" type="password" class="validate" name="password" onchange="confirmPassword()" required/>
                                    <label for="password">会员密码</label>
                                </div>
                                <div class="input-field col s6">
                                    <input id="confirm" type="password" class="validate" placeholder="确认密码" onchange="confirmPassword()" required/>
                                    <label for="confirm">确认密码</label>
                                </div>
                                <script>

                                    function confirmPassword(){
                                        var password = document.getElementById('password');
                                        var password2 = document.getElementById('confirm');

                                        if (password2.value === '')
                                            return;
                                        if (password.value === ''){
                                            alert('密码不能为空');
                                            return false;
                                        }

                                        if (password.value !== password2.value){
                                            password2.setAttribute('class', 'invalid');
                                            alert('密码不一致！！');
                                            return false;
                                        }
                                        password2.setAttribute('class', 'valid');
                                        return true;
                                    }
                                </script>
                            </div>

                            <div class="row">
                                <div class="input-field col s6">
                                    <input id="email" name="email" type="email" class="validate" placeholder="邮箱" required/>
                                    <label for="email">邮箱</label>
                                </div>
                                <div class="input-field col s6">
                                    性别：
                                    <input name="sex" type="radio" id="man" value="男" checked />
                                    <label for="man">男</label>
                                    <input name="sex" type="radio" id="woman" value="女" />
                                    <label for="woman">女</label>
                                </div>
                            </div>

                            <div>
                                <input id="birthday" name="birthday" type="date" class="validate" placeholder="会员生日" required/>
                                <label for="birthday">会员生日</label>
                            </div>

                            <div class="row">

                                <div class="input-field col s2">
                                    会员等级：
                                </div>
                                <div class="col s10">
                                    <label style="display: none" for="inputState">State</label>
                                    <select id="inputState" class="form-control" name="gradeName" required>

                                    </select>
                                </div>

                            </div>

                            <button onclick="submitForm()" class="waves-effect waves-light btn" type="button">添加会员</button>
                            <button class="waves-effect waves-light btn" type="reset">重置数据</button>
                        </form>

                        <div class="clearBoth"></div>
                    </div>
                <!--</div>-->
            </div>
            <!--页脚-->
            <br>
            <br>
            <br>
            <footer><p class="text-center">Copyright &copy; 2017.Company name All rights reserved.</p></footer>
        </div>

    </div>
</div>

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>

<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>

<script src="assets/materialize/js/materialize.min.js"></script>

<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>

<script src="assets/js/easypiechart.js"></script>
<script src="assets/js/easypiechart-data.js"></script>

<script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>

<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>

<script>
    function submitForm() {
        if (confirmPassword())
            $('#addMember').submit();
    }

    $.ajax({
        type: "get",
        url: '/getGrade',
        dataTyp:'json',
        success: function (data) {
            var inputState = $('#inputState');
            inputState.html('');
            $.each( data, function(index, content)
            {
                inputState.html(inputState.html() +"<option id='"+content.id+"'>"+content.gradeName+"</option>");
            });
        }
    });
</script>
</body>

</html>